<template>
   <div>
     <!-- 面包屑导航区 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item>学院管理</el-breadcrumb-item>
       <el-breadcrumb-item>专业列表</el-breadcrumb-item>
     </el-breadcrumb>

     <!-- 卡片视图区 -->
     <el-card>
       <!-- 搜索与添加区域-->
       <el-row :gutter= "20">
         <el-col :span="9">
           <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" clearable @clear="getMajorListLimit" >
             <el-select placeholder="请选择" v-model="queryInfo.select" slot="prepend" clearable @clear="getMajorListLimit">
               <el-option
                 v-for="item in collegeList"
                 :key="item.collegeId"
                 :label="item.collegeName"
                 :value="item.collegeId">
               </el-option>
             </el-select>
             <el-button slot="append" icon="el-icon-search" @click="getMajorListLimit" ></el-button>
           </el-input>
         </el-col>
         <el-col :span="4">
           <el-button type="primary" @click="addMajorDialogVisible = true">添加专业</el-button>
         </el-col>
       </el-row>

       <!-- 专业列表主体区域 -->
       <el-table :data="majorList" border stripe>
         <el-table-column align="center" type="index" label="#"></el-table-column>
         <el-table-column align="center" prop="college.collegeName" label="所属学院"></el-table-column>
         <el-table-column align="center" prop="majorName" label="专业名称"></el-table-column>
         <el-table-column align="center" label="操作" width="170px">
           <template slot-scope="scope">
             <!-- 修改按钮 -->
             <el-button type="primary" size="mini" icon="el-icon-edit"  @click="showEditMajorDialog(scope.row.majorName)" ></el-button>
             <!-- 删除按钮 -->
             <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteMajor(scope.row.majorName)" ></el-button>
           </template>
         </el-table-column>
       </el-table>

       <!-- 分页区域 -->
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="queryInfo.pageNum"
         :page-sizes="[5, 10, 15, 20]"
         :page-size="queryInfo.pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>

       <!--添加专业对话框 -->
       <el-dialog
        title="添加专业"
        :visible.sync="addMajorDialogVisible"
        width="50%"
        @close="addMajorDialogClosed">
        <!-- 主题区域 -->
         <el-form :model="addMajorForm" :rules="addMajorFormRules" ref="addMajorFormRef" label-width="100px">
            <el-form-item label="院部名称" prop="collegeId">
              <el-select placeholder="请选择" v-model="addMajorForm.collegeId">
                <el-option
                  v-for="item in collegeList"
                  :key="item.collegeId"
                  :label="item.collegeName"
                  :value="item.collegeId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业名称" prop="majorName">
              <el-input v-model="addMajorForm.majorName"></el-input>
            </el-form-item>
         </el-form>
         <!-- 底部区域 -->
         <span slot="footer" class="dialog-footer">
            <el-button @click="addMajorDialogVisible = false" >取 消</el-button>
            <el-button type="primary" @click="addMajor">确 定</el-button>
          </span>
       </el-dialog>

       <!--编辑专业对话框 -->
       <el-dialog
         title="添加专业"
         :visible.sync="editMajorDialogVisible"
         width="50%"
         @close="editMajorDialogClosed">
         <!-- 主题区域 -->
         <el-form :model="editMajorForm" :rules="addMajorFormRules" ref="editMajorFormRef" label-width="100px">
           <el-form-item label="院部名称" prop="collegeId">
             <el-select placeholder="请选择" v-model="editMajorForm.collegeId" disabled >
               <el-option
                 v-for="item in collegeList"
                 :key="item.collegeId"
                 :label="item.collegeName"
                 :value="item.collegeId">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="专业名称" prop="majorName">
             <el-input v-model="editMajorForm.majorName"></el-input>
           </el-form-item>
         </el-form>
         <!-- 底部区域 -->
         <span slot="footer" class="dialog-footer">
            <el-button @click="editMajorDialogVisible = false" >取 消</el-button>
            <el-button type="primary" @click="editMajor" >确 定</el-button>
          </span>
       </el-dialog>


     </el-card>
   </div>
</template>

<script>
    export default {
        data() {
          return {
            /* 获取专业列表的参数对象 */
            queryInfo: {
              select: '',
              query: '',
              //当前的页数
              pageNum: 1,
              //当前每页显示多少条数据
              pageSize: 10
            },
            /* total总数*/
            total: 0,
            /* 学院列表集合 */
            collegeList: [],
            /* 专业列表集合 */
            majorList: [],
            /* 控制添加专业的对话框的显示/隐藏 */
            addMajorDialogVisible: false,
            /* 控制修改专业的对话框的显示/隐藏 */
            editMajorDialogVisible: false,
            /*添加对话表单数据*/
            addMajorForm: {
              collegeId: '',
              majorName: ''
            },
            /*编辑对话表单数据*/
            editMajorForm: {
              collegeId: '',
              majorId: '',
              majorName: ''
            },
            /*表单验证规则*/
            addMajorFormRules: {
              collegeId: [
                {required: true, message: '请选择学院', trigger: 'blur'}
              ],
              majorName: [
                {required: true, message: '输入专业名称', trigger: 'blur'},
                {min: 2, max: 12, message: '长度为2-16个字符之间', trigger: 'blur'}
              ]
            },
          }
        },

      created() {
        this.getMajorListLimit();
      },

      methods: {

          /* 获取专业列表集合 */
        async getMajorListLimit() {
          const {data: res} = await this.$axios.get(this.$http+'/collegeManageController/getMajorListLimit',{
            params: this.queryInfo
          });
          this.majorList = res.datas.majorList;
          this.total = res.datas.total;
          this.collegeList = res.datas.collegeList;
          console.log(res)

        },

        /* 添加新的专业 */
        addMajor() {
          //进行表单验证
          this.$refs.addMajorFormRef.validate(valid => {
            if (!valid) return;

            //对该专业查找
            this.$axios.get(this.$http+'/collegeManageController/checkMajorIsExist', {
              params: this.addMajorForm
            }).then(res => {
              if (res.data.code !== 200)
                return this.$message.warning('该专业已录入');
              //发送添加请求
              this.$axios.post(this.$http+'/collegeManageController/addMajor', this.addMajorForm).then(res => {
                if (res.data.code === 200)
                  this.$message.success("添加专业成功！");
                else if (res.data.code === 100 )
                  this.$message.error("添加专业失败！");
                //隐藏添加对话框
                this.addMajorDialogVisible = false;
                //刷新院部列表
                this.getMajorListLimit();
              }).catch(err => err)
            }).catch(err => {
              this.$message.error("后台异常，专业查重失败")
            })
          })
        },

        /* 渲染数据到编辑对话框 */
        async showEditMajorDialog(majorName) {
          //发送请求
          const {data: res} = await this.$axios.get(this.$http+'/collegeManageController/getMajorInfo?majorName='+majorName);
          this.editMajorForm = res.datas.majorInfo
          this.editMajorDialogVisible = true;
        },

        /* 修改信息 */
        editMajor() {
          //表单验证
          this.$refs.editMajorFormRef.validate(valid => {
            if (!valid) return;
            //put请求
            this.$axios.put(this.$http+'/collegeManageController/editMajor', this.editMajorForm).then(res => {
              if (res.data.code === 100)
                this.$message.warning("修改专业信息失败。");
              else if (res.data.code === 200)
                this.$message.success("修改专业信息成功。");
              //隐藏对话框
              this.editMajorDialogVisible = false;
              //刷新列表
              this.getMajorListLimit();
            }).catch(err => {
              this.$message.error("后台异常，修改信息失败")
            })
          })
        },

        /* 删除专业信息 */
        async deleteMajor(majorName) {
          //弹框是否确认删除
          const confirmResult = await this.$confirm('此操作将删除该专业所有信息, 是否继续?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err);
          if(confirmResult !== 'confirm')
            return this.$message.info('已取消删除');
          //发送删除请求
          this.$axios.delete(this.$http+'/collegeManageController/deleteMajor?majorName='+majorName).then(res => {
            if (res.data.code === 200)
              this.$message.success("该专业及其相关信息已删除.");
            else if (res.data.code === 100)
              this.$message.error("后台处理失败.");
            this.getMajorListLimit();
          }).catch(err => err)
        },

        /* 监听 pageSize 改变的事件 */
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          //每次改变之后，重新获取数据
          this.getMajorListLimit();
        },

        /* 监听 pageNum 改变的事件 */
        handleCurrentChange(newPage) {
          this.queryInfo.pageNum = newPage ;
          //每次改变之后，重新获取数据
          this.getMajorListLimit();
        },

        /* 监听添加对话框的关闭， 对其进行清空 */
        addMajorDialogClosed() {
          this.$refs.addMajorFormRef.resetFields();
        },

        /* 监听编辑对话框的关闭， 对其进行清空 */
        editMajorDialogClosed() {
          this.$refs.editMajorFormRef.resetFields();
        },
      }



    }
	
</script>

<style scoped>

</style>
